<template>
	<view>
		<view class="d-flex choose a-center">
			<view class="d-flex span-15 j-sa">
				<view class="span-20 j-center d-flex a-center" v-for="(item,index) in screen.list" :key="index"
					@click="changeIndex(index)">
					<view :class="screen.currentIndex==index?'main-text-color':''">{{item.name}}</view>
					<view class="">
						<view class="iconfont icon-sort-up-full line-h0 font-sm"
							:class="item.status==1?'main-text-color':''"></view>
						<view class="iconfont icon-sort-down-full line-h0 font-sm"
							:class="item.status==2?'main-text-color':''"></view>
					</view>
				</view>
			</view>
			<view class="span-5 text-center" @click="showDrawer">
				筛选
			</view>
		</view>
		<search-list v-for="(item,i) in searchlist" :key="i" :item="item"></search-list>
		<view class="mt-2 pb-5">{{loadmore}}</view>
		<uni-drawer ref="showRight" mode="right" :mask-click="true" width="260">
			<scroll-view style="height: 100%;" scroll-y="true">
				<view class="">
					<color-tag v-for="(item,j) in label.list" :key="j" :item="item" :color="false"
						:bool="label.selected==j" @click.native="changeTag(j)"></color-tag>
				</view>
			</scroll-view>
		</uni-drawer>
	</view>
</template>

<script>
	import {
		getChoose
	} from '@/api/index.js';
	export default {
		data() {
			return {
				loadmore: '加载更多',
				list: [],
				page: 1,
				title: '',
				screen: {
					currentIndex: 0,
					list: [{
							name: '综合',
							status: 1,
							key: 'all'
						},
						{
							name: '销量',
							status: 0,
							key: 'sale_count'
						},
						{
							name: '价格',
							status: 0,
							key: 'min_price'
						}
					]
				},
				label: {
					selected: 0,
					list: [{
							name: '不限',
							rule: false,
							value: false

						},
						{
							name: '100-200',
							rule: 'between',
							value: '100,200'

						},
						{
							name: '200-300',
							rule: 'between',
							value: '200,300'

						},
						{
							name: '300-400',
							rule: 'between',
							value: '300,400'

						},
						{
							name: '400以上',
							rule: '>',
							value: '400'

						}
					]
				},
				searchlist: [],
			}
		},
		computed: {
			options() {
				let obj = this.screen.list[this.screen.currentIndex]
				let value = obj.status == 1 ? 'asc' : 'desc'
				return {
					[obj.key]: value
				}
			}
		},
		onPullDownRefresh() {
			console.log('refresh');
			this.getchoose()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.loadmore = '加载中'
			this.page++
			this.getchoose(false, () => {
				uni.showToast({
					title: '加载成功',
					icon: 'none'
				})
			})
		},
		methods: {
			getchoose(refresh = true, callback = false) {
				let page = refresh ? 1 : this.page
				getChoose({
					title: this.title,
					page: page,
					...this.options,
					...this.getCondition(),
				}).then(res => {
					this.list = this.formatter(res.data)
					this.searchlist = refresh ? [...this.list] : [...this.searchlist, ...this.list]
					this.loadmore = this.list.length < 6 ? '没有更多了' : '加载更多'
					if (typeof callback == 'function') {
						callback()
					}
				})
			},
			formatter(res) {
				return res.map(item => {
					let good_nums = item.comments_good_count ? (item.comments_good_count / item.comments_count) *
						100 : 0
					return {
						titlepic: item.cover,
						title: item.title,
						desc: item.desc,
						pprice: item.min_price,
						comment_num: item.comments_count,
						good_num: good_nums.toFixed(2) + '%'
					}
				})
			},
			getCondition() {
				let obj = this.label.list[this.label.selected];
				if (obj.rule && obj.value) {
					return {
						price: `${obj.rule},${obj.value}`
					}
				}
			},
			changeIndex(index) {
				//上下切换
				let oldIndex = this.screen.currentIndex
				let oldItem = this.screen.list[oldIndex]
				if (oldIndex == index) {
					oldItem.status = oldItem.status == 1 ? 2 : 1
					this.getchoose()
					return
				} else {
					//左右切换
					let newItem = this.screen.list[index]
					newItem.status = 1
					oldItem.status = 0
					this.screen.currentIndex = index
					this.getchoose()
					return
				}
			},
			changeTag(j) {
				this.label.selected = j
				this.getchoose()
			},
			showDrawer() {
				this.$refs.showRight.open();
			},

		},
		onLoad(e) {
			this.title = e.key
		},
		mounted() {
			this.getchoose()
		}
	}
</script>

<style scoped>
	.choose {
		width: 750rpx;
		height: 88rpx;
		background-color: #fff;
		position: sticky;
		top: 0;
		z-index: 999;
	}
</style>